<script type="text/x-template" id="push-notification-tab">
    <div v-bind:class="[componentId]">
        <cly-main>
            <cly-section>
                <cly-metric-cards :multiline="false">
                    <cly-metric-card :number="totalAppUsers" :label="i18n('push-notification.total-app-users')">
                    </cly-metric-card>
                    <cly-metric-card :number="enabledUsers" :label="i18n('push-notification.enabled-users')">
                    </cly-metric-card>
                    <cly-metric-card :is-percentage="true" :number="enabledUsersPercentage" :label="i18n('push-notification.enabled-users-percentage')" :tooltip="i18n('push-notification.enabled-users-percentage-description')">
                    </cly-metric-card>
                </cly-metric-cards>
            </cly-section>
            <div>
                <div class="bu-level-left" style="margin-bottom:32px">
                    <div class="bu-level-item bu-mr-4">
                        <div class="cly-vue-platform-filter-label"> 
                            {{i18n('push-notification.results-for')}}
                        </div>
                    </div>
                    <div class="bu-level-item">
                        <cly-select-x
                            placeholder="All Notification Types"
                            mode="multi-check"
                            v-model="selectedNotificationKind"
                            :options="notificationTypes">
                        </cly-select-x>
                    </div>
                </div>
            </div>
            <cly-section>
                <cly-datatable-n :data-source="remoteTableDataSource" v-loading="areRowsLoading || isUserCommandLoading" :force-loading="isLoading" :available-dynamic-cols="optionalTableColumns" :resizable="true" class="is-clickable cly-vue-push-notification-table">
                    <template v-slot:header-left>
                        <cly-multi-select 
                            class="bu-ml-3 ratings-tab-view__filter-selector"
                            v-model="activeFilter"
                            :fields="activeFilterFields">
                        </cly-multi-select>
                    </template>
                    <template v-slot="scope">
                        <el-table-column fixed width="400" type="clickable" sortable="custom" prop="name" :label="i18n('push-notification.table-campaign-name')" class="cly-vue-push-notification-table-column">
                            <template slot-scope="scope">
                                <div class="bu-is-flex bu-is-flex-direction-column">
                                    <a v-bind:href="'#/messaging/details/' + scope.row._id" class="bu-is-flex bu-is-align-items-center">
                                        <a class="has-ellipsis">{{(scope.row.name)}}</a>
                                    </a>
                                    <span class="cly-vue-push-notification-table-column__second-line">
                                        <span> {{getPreviewPlatforms(scope.row.platforms)}} </span>
                                        <span class="blinker cly-vue-push-notification-table-column__separator-blinker"></span>
                                        <span> {{i18n('push-notification.created-by')}} {{scope.row.createdBy || '-'}} </span>
                                    </span>
                                </div>
                            </template>
                        </el-table-column>
                        <template v-for="(col,idx) in scope.dynamicCols">
                            <el-table-column 
                                width="360"
                                v-if="col.value === 'content'"  
                                :key="idx" 
                                sortable="custom" 
                                :label="col.label">
                                <template v-slot="rowScope">
                                    {{rowScope.row.content}}
                                </template>
                            </el-table-column>
                            <el-table-column 
                                width="200"
                                v-if="col.value === 'createdBy'"  
                                :key="idx" 
                                sortable="custom" 
                                :label="col.label">
                                <template v-slot="rowScope">
                                    {{rowScope.row.createdBy}}
                                </template>
                            </el-table-column>
                            <el-table-column 
                                width="200"
                                v-if="col.value === 'created'"  
                                :key="idx" 
                                sortable="custom" 
                                :label="col.label">
                                <template v-slot="rowScope">
                                <div class="bu-is-flex bu-is-flex-direction-column">
                                    <span class="cly-vue-push-notification-table-column__first-line">{{scope.row.createdDateTime.date}}</span>
                                    <span class="cly-vue-push-notification-table-column__second-line">{{scope.row.createdDateTime.time}}</span>
                                </div>
                                </template>
                            </el-table-column>
                        </template>
                        <el-table-column width="220" sortable="custom" prop="status" :label="i18n('push-notification.table-status')">
                            <template slot-scope="scope">
                                <cly-status-tag :text="statusOptions[scope.row.status] && statusOptions[scope.row.status].label || '' " :color="getStatusBackgroundColor(scope.row.status)"> </cly-status-tag>
                            </template>
                        </el-table-column>
                        <el-table-column width="220" sortable="custom" prop="sent" :label="i18n('push-notification.table-sent')" class="cly-vue-push-notification-table-column">
                            <template slot-scope="scope">
                                <span class="cly-vue-push-notification-table-column__numbers-only"> {{formatNumber(scope.row.sent)}} </span>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="200" sortable="custom" prop="actioned" :label="i18n('push-notification.table-actioned')" class="cly-vue-push-notification-table-column">
                            <template slot-scope="scope">
                                <div class="bu-level">
                                    <div class="bu-level-left cly-vue-push-notification-table-column__numbers-only">
                                        <span class="bu-mr-1">{{formatNumber(scope.row.actioned)}}</span>
                                        <span class="bu-mr-1">|</span>
                                        <span>{{formatPercentage(scope.row.actioned/scope.row.sent)}} %</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
						<el-table-column  min-width="280" sortable="custom" prop="lastDate" :label="i18n('push-notification.table-date-sent')" class="cly-vue-push-notification-table-column">
                            <template slot-scope="scope">
                                <div class="bu-is-flex bu-is-flex-direction-column">
                                    <template v-if="scope.row.lastDate && scope.row.lastDate.date"> 
                                        <span class="cly-vue-push-notification-table-column__first-line">{{scope.row.lastDate.date}}</span>
                                        <span class="cly-vue-push-notification-table-column__second-line">{{scope.row.lastDate.time}}</span>
                                    </template>
                                    <template v-else>
                                        <span>-</span>
                                    </template>
                                </div>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column min-width="220" sortable="custom" prop="createdDateTime" :label="i18n('push-notification.table-created')"  class="cly-vue-push-notification-table-column">
                            <template slot-scope="scope">
                                <div class="bu-is-flex bu-is-flex-direction-column">
                                    <span class="cly-vue-push-notification-table-column__first-line">{{scope.row.createdDateTime.date}}</span>
                                    <span class="cly-vue-push-notification-table-column__second-line">{{scope.row.createdDateTime.time}}</span>
                                </div>
                            </template>
                        </el-table-column> -->
                        
                        <el-table-column type="options">
                            <template slot-scope="scope">
                                <cly-more-options v-if="scope.row.hover" size="small" @command="handleUserCommands($event, scope.row._id, scope.row.notificationType)">
                                    <el-dropdown-item v-if="shouldShowStartUserCommand(scope.row.status)" :command="UserCommandEnum.START">{{i18n('push-notification.start')}} </el-dropdown-item>
                                    <el-dropdown-item v-if="shouldShowStopUserCommand(scope.row.status)" :command="UserCommandEnum.STOP">{{i18n('push-notification.stop')}} </el-dropdown-item>
                                    <el-dropdown-item v-if="shouldShowEditUserCommand(scope.row.status)" :command="UserCommandEnum.EDIT">{{i18n('push-notification.edit')}}</el-dropdown-item>
                                    <el-dropdown-item v-if="shouldShowEditDraftUserCommand(scope.row.status)" :command="UserCommandEnum.EDIT_DRAFT">{{i18n('push-notification.edit-draft')}}</el-dropdown-item>
                                    <el-dropdown-item v-if="shouldShowEditRejectUserCommand(scope.row.status)" :command="UserCommandEnum.EDIT_REJECT">{{i18n('push-notification.edit')}}</el-dropdown-item>
                                    <el-dropdown-item v-if="shouldShowDuplicateUserCommand(scope.row.status)" :command="UserCommandEnum.DUPLICATE">{{i18n('push-notification.duplicate')}}</el-dropdown-item>
                                    <el-dropdown-item v-if="shouldShowDeleteUserCommand(scope.row.status)"  :command="UserCommandEnum.DELETE">{{i18n('push-notification.delete')}}</el-dropdown-item>
                                    <el-dropdown-item v-if="shouldShowResendUserCommand(scope.row.status)" :command="UserCommandEnum.RESEND">{{i18n('push-notification.resend')}}</el-dropdown-item>
                                    <el-dropdown-item v-if="shouldShowApproveUserCommand(scope.row.status)"  :command="UserCommandEnum.APPROVE">{{i18n('push-notification.approve')}}</el-dropdown-item>
                                    <el-dropdown-item v-if="shouldShowRejectUserCommand(scope.row.status)" :command="UserCommandEnum.REJECT">{{i18n('push-notification.reject')}}</el-dropdown-item>
                                </cly-more-options>
                            </template>
                        </el-table-column>
                    </template>
                </cly-datatable-n>
            </cly-section>
        </cly-main>
    </div>
</script>